<template>
    <!-- 数据中心/运营数据中心/考勤 -->
    <div class="checkWork">
        <div class="top_operation">
            <!-- 顶部四级联动选择器联动组件 -->
            <TopSelect
                ref="topSelect"
                @headChange="getHeadId"
                :isRegionShow="isRegionShow"
                @regionChange="getRegionId"
                :isCityShow="isCityShow"
                @cityChange="getCityId"
                :isWareShow="isWareShow"
                @wareChange="getWareId"
            ></TopSelect>
            <div class="every_operation">
                <span>考勤部门：</span>
                <a-input placeholder="请输入" v-model="department" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>职位：</span>
                <a-input placeholder="请输入" v-model="position" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation" style="margin-top:10px;">
                <span>姓名：</span>
                <a-input placeholder="请输入" v-model="userName" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation" style="margin-top:10px;">
                <span>工号：</span>
                <a-input placeholder="请输入" v-model="userNo" style="width:195px;" allowClear/>
            </div>

            <div class="every_operation">
                <span>考勤日期：</span>
                <a-range-picker
                    v-model="attendTime"
                    :placeholder="['Start Date', 'End Date']"
                    @change="checkChange"
                    @ok="checkOk"
                    style="width:195px;"
                />
            </div>

            <div class="every_operation">
                <span>创建人：</span>
                <a-input placeholder="请输入" v-model="createBy" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>创建时间：</span>
                <a-range-picker
                    v-model="createTime"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="createChange"
                    @ok="createOk"
                    style="width:195px;"
                />
            </div>
            <div class="every_operation">
                <span>修改人：</span>
                <a-input placeholder="请输入" v-model="updateBy" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>修改时间：</span>
                <a-range-picker
                    v-model="updateTime"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="editChange"
                    @ok="editOk"
                    style="width:195px;"
                />
            </div>
            
            <div class="button_div">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
            </div>
        </div>
        
        <div class="add_btn">
            <a-button type="primary" icon="import" @click="doImport()">导入</a-button>
            <a-button style="margin-left:20px;" type="primary" icon="export" @click="doExport()">导出</a-button>
            <a-button style="margin-left:20px;" type="primary" icon="plus" @click="showDrawer">新增</a-button>
            <a-button style="margin-left:20px;" v-if="deletdBtnShow" @click="batchDelete()">批量删除</a-button>
            <!-- 右滑抽屉 -->
            <a-drawer
                :title="drawerTitle"
                :placement="placement"
                :closable="false"
                :visible="visible"
                @close="onClose"
                width="500"
            >
                <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    labelAlign="left"
                >
                    <a-form-model-item label="大区" prop="region">
                        <a-select
                            show-search
                            :filter-option="filterOption" 
                            style="width: 100%;" 
                            @change="regionChange" 
                            v-model="form.region" 
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="城市" prop="city">
                        <a-select
                            show-search
                            :filter-option="filterOption" 
                            style="width: 100%;" 
                            @change="cityChange" 
                            v-model="form.city" 
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="仓库" prop="name">
                        <a-select
                            show-search
                            :filter-option="filterOption" 
                            style="width: 100%;" 
                            @change="warehouseChange" 
                            v-model="form.name" 
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>

                    <a-form-model-item ref="userName" label="姓名" prop="userName">
                        <a-input
                            v-model="form.userName"
                            placeholder="请输入"
                            @blur="() => {$refs.userName.onFieldBlur()}"
                            :disabled="disabled"
                        />
                    </a-form-model-item>
                    
                    <a-form-model-item ref="department" label="考勤部门" prop="department">
                        <a-input
                            v-model="form.department"
                            placeholder="请输入"
                            @blur="() => {$refs.department.onFieldBlur()}"
                            :disabled="disabled"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="userNo" label="工号" prop="userNo">
                        <a-input
                            v-model="form.userNo"
                            placeholder="请输入"
                            @blur="() => {$refs.userNo.onFieldBlur()}"
                            :disabled="disabled"
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="position" label="职位" prop="position">
                        <a-input
                            v-model="form.position"
                            placeholder="请输入"
                            @blur="() => {$refs.position.onFieldBlur()}"
                            :disabled="disabled"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="日期" prop="attendTime">
                        <a-date-picker @change="dateOnChange" style="width:100%;" v-model="form.attendTime"/>
                    </a-form-model-item>
                    <a-form-model-item label="打卡班次" prop="attendShift">
                        <!-- <a-select v-model="form.attendShift" @change="attendShiftChange">
                            <a-select-option value="A 09:00-18:00">
                                A 09:00-18:00
                            </a-select-option>
                            <a-select-option value="休息">
                                休息
                            </a-select-option>
                            <a-select-option value="B 09:30-18:30">
                                B 09:30-18:30
                            </a-select-option>
                        </a-select> -->
                        <a-input
                            v-model="form.attendShift"
                            placeholder="请输入"
                            @blur="() => {$refs.position.onFieldBlur()}"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="上班打卡时间" prop="clockInTime">
                        <a-time-picker :value="moment(form.clockInTime, 'HH:mm')" format="HH:mm" @change="startOnChange" style="width:100%;"/>
                    </a-form-model-item>
                    <a-form-model-item label="上班打卡结果" prop="clockInStatus">
                        <a-select v-model="form.clockInStatus" @change="clockInStatusChange">
                            <a-select-option value="正常">
                                正常
                            </a-select-option>
                            <a-select-option value="迟到">
                                迟到
                            </a-select-option>
                            <a-select-option value="未打卡">
                                未打卡
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="下班打卡时间" prop="clockOutTime">
                        <a-time-picker :value="moment(form.clockOutTime, 'HH:mm')" format="HH:mm" @change="endOnChange" style="width:100%;"/>
                    </a-form-model-item>
                    <a-form-model-item label="下班打卡结果" prop="clockOutStatus">
                        <a-select v-model="form.clockOutStatus" @change="clockOutStatusChange">
                            <a-select-option value="正常">
                                正常
                            </a-select-option>
                            <a-select-option value="早退">
                                早退
                            </a-select-option>
                            <a-select-option value="未打卡">
                                未打卡
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>

                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="onSubmit">
                            确定
                        </a-button>
                        <a-button style="margin-left: 10px;" @click="cancelForm">
                            取消
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-drawer>
            <!-- 导入对话框 -->
            <a-modal
                title="导入确认"
                :visible="importVisible"
                :confirm-loading="importConfirmLoading"
                @ok="importHandleOk"
                @cancel="importHandleCancel"
                :footer="null"
            >
                <a-form-model
                    ref="importRuleForm"
                    :model="importForm"
                    :rules="importRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    labelAlign="left"
                >
                    <a-form-model-item label="大区" prop="region">
                        <a-select
                            show-search
                            :filter-option="filterOption" 
                            style="width: 100%;" 
                            @change="regionChange" 
                            v-model="importForm.regionId" 
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="城市" prop="city">
                        <a-select
                            show-search
                            :filter-option="filterOption" 
                            style="width: 100%;" 
                            @change="cityChange" 
                            v-model="importForm.cityId" 
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="仓库" prop="name">
                        <a-select
                            show-search
                            :filter-option="filterOption" 
                            style="width: 100%;" 
                            @change="warehouseChange" 
                            v-model="importForm.organizeId" 
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>

                    <p>
                        请从钉钉后台
                        <b>-【考勤统计】-【每日统计】</b>
                        选择正确日期、人员/部门进行导出，然后在此进行导入
                    </p>

                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" style="text-align:center;margin-top:10px;">
                        <a-upload
                            name="file"
                            :showUploadList="false"
                            :multiple="false"
                            :action="uploadUrl"
                            :headers="tokenHeader"
                            :data="uploadData"
                            @change="uploadChange"
                        >
                            <a-button type="primary" size="large" style="margin-left:10px;" :disabled="uploadDisabled"> <a-icon type="upload" /> 导入 </a-button>
                        </a-upload>
                    </a-form-model-item>

                </a-form-model>
            </a-modal>
            <!-- 导出对话框 -->
            <a-modal
                title="导出确认"
                :visible="exportVisible"
                :confirm-loading="exportConfirmLoading"
                @ok="exportHandleOk"
                @cancel="exportHandleCancel"
            >
                <span>确定导出？</span>
            </a-modal>
        </div>

        <div class="select_number">
            <span class="number_span">已选择<b>{{selectNumber}}</b>项</span>
            <span class="clear_span" @click="clearSelect">清空</span>
        </div>
        
        <div class="data_source_list">
            <div class="data_source_details">
                <a-table
                    :loading="tableLoading"
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 
                    :columns="columns" 
                    :data-source="data"
                    :pagination="false"
                    bordered
                    rowKey="id"
                    :scroll="xScroll"
                    >
                    <span slot="warehouse" slot-scope="text, record">
                        {{record.region}}-{{record.city}}-{{record.name}}
                    </span>
                    <span slot="attendTime" slot-scope="text, record">
                        {{record.attendTime.split(' ')[0]}}
                    </span>
                    <span slot="duration" slot-scope="text, record">
                        {{`${parseInt(record.duration/60)}小时${record.duration%60}分钟`}}
                    </span>
                    <a slot="action" href="javascript:;" slot-scope="text, record">
                        <span style="margin-right:8px;" @click="editDrawer(record)">修改</span>
                    </a>
                </a-table>
                <!-- 底部分页组件 -->
                <BottomPagination
                    :total="total"
                    @pageChange="pageChange"
                    @sizeChange="sizeChange"
                ></BottomPagination>
            </div>
            <!-- 批量删除对话框 -->
            <a-modal
                title="批量删除"
                :visible="batchDeleteVisible"
                :confirm-loading="batchDeleteConfirmLoading"
                @ok="batchDeleteHandleOk"
                @cancel="batchDeleteHandleCancel"
            >
                <p style="text-align:center;">确认删除？</p>
            </a-modal>
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '仓库',
            dataIndex: 'warehouse',
            key: 'warehouse',
            align: 'center',
            width: '220px',
            ellipsis: true,
            scopedSlots: { 
                customRender: 'warehouse',
            },
        },
        {
            title: '姓名',
            dataIndex: 'userName',
            key: 'userName',
            align: 'center',
            width: '100px',
            ellipsis: true,
        },
        {
            title: '考勤部门',
            dataIndex: 'department',
            key: 'department',
            align: 'center',
            width: '100px',
            ellipsis: true,
        },
        {
            title: '工号',
            dataIndex: 'userNo',
            key: 'userNo',
            align: 'center',
            width: '100px',
            ellipsis: true,
        },
        {
            title: 'WMS账号',
            dataIndex: 'accountWms',
            key: 'accountWms',
            align: 'center',
            width: '100px',
            ellipsis: true,
        },
        {
            title: '职位',
            dataIndex: 'position',
            key: 'position',
            align: 'center',
            width: '100px',
            ellipsis: true,
        },
        {
            title: '日期',
            dataIndex: 'attendTime',
            key: 'attendTime',
            align: 'center',
            width: '120px',
            ellipsis: true,
            scopedSlots: { 
                customRender: 'attendTime',
            },
        },
        {
            title: '班次',
            dataIndex: 'attendShift',
            key: 'attendShift',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '上班打卡时间',
            dataIndex: 'clockInTime',
            key: 'clockInTime',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '上班打卡结果',
            dataIndex: 'clockInStatus',
            key: 'clockInStatus',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '下班打卡时间',
            dataIndex: 'clockOutTime',
            key: 'clockOutTime',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '下班打卡结果',
            dataIndex: 'clockOutStatus',
            key: 'clockOutStatus',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '工作时长',
            dataIndex: 'duration',
            key: 'duration',
            scopedSlots: { 
                customRender: 'duration' 
            },
            align: 'center',
            width: '130px',
            ellipsis: true,
        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            key: 'createBy',
            align: 'center',
            width: '100px',
            ellipsis: true,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '修改人',
            dataIndex: 'updateBy',
            key: 'updateBy',
            align: 'center',
            width: '100px',
            ellipsis: true,
        },
        {
            title: '修改时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        { 
            title: '操作', 
            dataIndex: 'action', 
            key: 'action', 
            scopedSlots: { 
                customRender: 'action' 
            },
            align: 'center',
            width: '100px',
            fixed: 'right',
        },
    ];
    
    import moment from 'moment'
    import TopSelect from '../../meter/TopSelect'
    import BottomPagination from '../../meter/BottomPagination'
    import { getCheckList, addCheck, editCheck, deleteCheck, importCheck, exportCheck, getHeadquarters, getRegion, getCity, getWarehouse, } from '@/api/api'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import { downFile } from '@/api/manage'
    export default {
        name: "CheckWork",
        mixins:[JeecgListMixin],
        components: {
            TopSelect,
            BottomPagination,
        },
        data () {
            return {
                userName: '', // 姓名
                userNo: '', // 工号
                department: '', // 部门
                position: '', // 职位
                data: [],
                xScroll: {
                    x: 2110,
                },
                columns,
                tableLoading: false,
                selectNumber: 0, // 当前选中数据条数
                selectedRowKeys: [], // 当前选择集合
                deletdBtnShow: false, // 批量删除按钮是否显示
                headquartersId: '', // 总部id
                regionId: '', // 大区id
                cityId: '', // 城市id
                organizeId: '', // 仓库id
                isRegionShow: true,
                isCityShow: true,
                isWareShow: true,
                attendTime: [],
                attendTime_begin: '',
                attendTime_end: '',
                createBy: '', // 创建人
                createTime: [], // 创建时间
                updateBy: '', // 修改人
                updateTime: [], // 修改时间
                createTime_begin: '', // 创建时间开始时间
                createTime_end: '', // 创建时间结束时间
                updateTime_begin: '', // 修改时间开始时间
                updateTime_end: '', // 修改时间结束时间
                dateFormat: 'YYYY-MM-DD HH:mm:ss',
                pageNo: 1,
                pageSize: 10,
                total: 0,
                visible: false,
                placement: 'right',
                drawerTitle: '新增考勤',
                labelCol: { span: 7 },  
                wrapperCol: { span: 16 },
                other: '',
                form: {
                    region: '',
                    city: '',
                    name: '',
                    regionId: '', // 大区id
                    cityId: '', // 城市id
                    organizeId: '', // 仓库id
                    userName: '',
                    userNo: '',
                    department: '',
                    position: '',
                    attendTime: '',
                    attendShift: '',
                    clockInTime: '00:00',
                    clockInStatus: '',
                    clockOutTime: '00:00',
                    clockOutStatus: '',
                },
                rules: {
                    region: [
                        { required: true, message: '请选择大区', trigger: 'change' },
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' },
                    ],
                    name: [
                        { required: true, message: '请选择仓库', trigger: 'change' },
                    ],
                    userName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                    department: [
                        { required: true, message: '请输入部门', trigger: 'blur' },
                    ],
                    userNo: [
                        { required: true, message: '请输入工号', trigger: 'blur' },
                    ],
                    position: [
                        { required: true, message: '请输入职位', trigger: 'blur' },
                    ],
                    attendTime: [
                        { required: true, message: '请选择日期', trigger: 'change'},
                    ],
                    attendShift: [
                        { required: true, message: '请输入打卡班次', trigger: 'change'},
                    ],
                    clockInTime: [
                        { required: true, message: '请选择上班打卡时间', trigger: 'change'},
                    ],
                    clockInStatus: [
                        { required: true, message: '请选择上班打卡结果', trigger: 'change'},
                    ],
                    clockOutTime: [
                        { required: true, message: '请选择下班打卡时间', trigger: 'change'},
                    ],
                    clockOutStatus: [
                        { required: true, message: '请选择下班打卡结果', trigger: 'change'},
                    ],
                },
                validStatus: true, // 当前表单验证状态，true表示成功，false表示失败
                batchDeleteVisible: false, // 批量删除
                batchDeleteConfirmLoading: false,
                importVisible: false, // 导入
                importConfirmLoading: false,
                exportVisible: false, // 导出
                exportConfirmLoading: false,
                importForm: { // 导入表单
                    region: '',
                    city: '',
                    name: '',
                    regionId: '', // 大区id
                    cityId: '', // 城市id
                    organizeId: '', // 仓库id
                },
                importRules: {
                    region: [
                        { required: true, message: '请选择大区', trigger: 'change', },
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change', },
                    ],
                    name: [
                        { required: true, message: '请选择仓库', trigger: 'change', },
                    ],
                },
                regionList: [],
                cityList: [],
                warehouseList: [],
                regionName: '', // 大区名称
                cityName: '', // 城市名称
                warehouseName: '', // 仓库名称
                addMode: true,
                disabled: false,
                id: '',
                ids: '',
                uploadDisabled: true,
                uploadData: {},
                url: {
                    list: "/sys/dict/list",
                    delete: "/sys/dict/delete",
                    exportXlsUrl: "sys/dict/exportXls",
                    importExcelUrl: "sys/dict/importExcel",
                    refleshCache: "sys/dict/refleshCache",
                    queryAllDictItems: "sys/dict/queryAllDictItems",
                    uploadUrl: 'biz/attendance/importExcel',
                    exportUrl: 'biz/attendance/exportXls',
                },
            }
        },
        created() {
        },
        computed: {
            uploadUrl: function () {
                return `${window._CONFIG['domianURL']}/${this.url.uploadUrl}`;
            }
        },
        methods: {
            moment,
            // 选择框过滤
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            // 搜索
            onSearch() {
                if( this.regionId === '' || this.cityId === '' || this.organizeId === '' ){
                    this.$message.warning('搜索时必须先选择大区、城市和仓库！')
                }else{
                    this.getCheckList()
                }
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 重置
            onReset() {
                this.$refs.topSelect.onReset()
                this.userName = ''
                this.userNo = ''
                this.department = ''
                this.position = ''
                this.attendTime = []
                this.attendTime_begin = ''
                this.attendTime_end = ''
                this.createBy = ''
                this.createTime = []
                this.updateBy = ''
                this.updateTime = []
                this.createTime_begin = ''
                this.createTime_end = ''
                this.updateTime_begin = ''
                this.updateTime_end = ''
                this.pageSize = 10
                this.pageNo = 1
                this.total = 0
                this.data = []
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 获取列表数据
            getCheckList() {
                let params = {
                    regionId: this.regionId,
                    cityId: this.cityId,
                    organizeId: this.organizeId,
                    department: this.department,
                    position: this.position,
                    userName: this.userName,
                    userNo: this.userNo,
                    attendTime_begin: this.attendTime_begin + " 00:00:00",
                    attendTime_end: this.attendTime_end + " 00:00:00",
                    createBy: this.createBy,
                    updateBy: this.updateBy,
                    createTime_begin: this.createTime_begin,
                    createTime_end: this.createTime_end,
                    updateTime_begin: this.updateTime_begin,
                    updateTime_end: this.updateTime_end,
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                    delFlag: 0,
                }
                this.tableLoading = true
                getCheckList(params).then((res)=>{
                    this.tableLoading = false
                    if(res.success){
                        this.data = res.result.records
                        this.total = res.result.total
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            
            // 选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
                this.selectNumber = selectedRowKeys.length
                if(this.selectedRowKeys.length > 0){
                    this.deletdBtnShow = true
                }else{
                    this.deletdBtnShow = false
                }
            },
            // 清空选中
            clearSelect() {
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 获取当前总部id
            getHeadId(data) {
                this.headquartersId = data
            },
            // 获取当前大区id
            getRegionId(data) {
                this.regionId = data
                this.$refs.topSelect.clearRegion()
            },
            // 获取当前城市id
            getCityId(data) {
                this.cityId = data
                this.$refs.topSelect.clearCity()
            },
            // 获取当前仓库id
            getWareId(data) {
                this.organizeId = data
                this.pageNo = 1
                this.pageSize = 10

                // 当大区、城市、仓库都存在且都只有一个的时候自动请求列表
                if( this.regionId && this.cityId && this.organizeId ){
                    this.getCheckList()
                }
            },
            // 获取当前页数、条数
            pageChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getCheckList()
            },
            // 获取当前页数、条数
            sizeChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getCheckList()
            },
            // 新增收支项
            showDrawer() {
                this.addMode = true
                this.visible = true
                this.drawerTitle = '新增考勤'
                this.disabled = false
                this.form.region = ''
                this.form.city = ''
                this.form.name = ''
                this.form.userNo = ''
                this.form.userName = ''
                this.form.department = ''
                this.form.position = ''
                this.form.attendTime = ''
                this.form.attendShift = ''
                this.form.clockInTime = '00:00'
                this.form.clockInStatus = ''
                this.form.clockOutTime = '00:00'
                this.form.clockOutStatus = ''
                // 只有验证失败，新增的时候才重置验证状态
                if(this.validStatus === false) {
                    this.$refs.ruleForm.resetFields()
                }

                this.cityList = []
                this.warehouseList = []

                this.getHeadquartersList()
            },
            onClose() {
                this.visible = false;
            },
            // 修改收支项
            editDrawer(record) {
                this.addMode = false
                this.visible = true
                this.drawerTitle = '修改考勤'
                this.disabled = true
                this.id = record.id
                this.form.region = record.region
                this.form.city = record.city
                this.form.name = record.name
                this.form.userNo = record.userNo
                this.form.userName = record.userName
                this.form.department = record.department
                this.form.position = record.position
                this.form.attendTime = record.attendTime
                this.form.attendShift = record.attendShift
                this.form.clockInTime = record.clockInTime
                this.form.clockInStatus = record.clockInStatus
                this.form.clockOutTime = record.clockOutTime
                this.form.clockOutStatus = record.clockOutStatus
            },
            // 表单
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.validStatus = true
                        if(this.addMode){ // 新增
                            let params = {
                                region: this.form.region,
                                city: this.form.city,
                                name: this.form.name,
                                regionId: this.form.regionId,
                                cityId: this.form.cityId,
                                organizeId: this.form.organizeId,
                                userNo: this.form.userNo,
                                userName: this.form.userName,
                                department: this.form.department,
                                position: this.form.position,
                                attendTime: this.form.attendTime + ' 00:00:00',
                                attendShift: this.form.attendShift,
                                clockInTime: this.form.clockInTime,
                                clockInStatus: this.form.clockInStatus,
                                clockOutTime: this.form.clockOutTime,
                                clockOutStatus: this.form.clockOutStatus,
                            }
                            addCheck(params).then((res)=>{
                                if(res.success){
                                    this.visible = false
                                    if( this.regionId !== '' && this.cityId !== '' && this.organizeId !== '' ){
                                        this.getCheckList()
                                    }
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }else{ // 修改
                            let params = {
                                id: this.id,
                                attendTime: this.form.attendTime + ' 00:00:00',
                                attendShift: this.form.attendShift,
                                clockInTime: this.form.clockInTime,
                                clockInStatus: this.form.clockInStatus,
                                clockOutTime: this.form.clockOutTime,
                                clockOutStatus: this.form.clockOutStatus,
                            }
                            editCheck(params).then((res)=>{
                                if(res.success){
                                    this.visible = false
                                    this.getCheckList()
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }
                        
                    } else {
                        this.validStatus = false
                        return false;
                    }
                });
                },
            cancelForm() {
                this.visible = false;
            },
            
            // 考勤时间
            checkChange(value, dateString) {
                this.attendTime = value
                this.attendTime_begin = dateString[0]
                this.attendTime_end = dateString[1]
            },
            checkOk(value) {
                console.log('onOk: ', value);
            },
            // 创建时间
            createChange(value, dateString) {
                this.createTime = value
                this.createTime_begin = dateString[0]
                this.createTime_end = dateString[1]
            },
            createOk(value) {
                console.log('onOk: ', value);
            },
            // 修改时间
            editChange(value, dateString) {
                this.updateTime = value
                this.updateTime_begin = dateString[0]
                this.updateTime_end = dateString[1]
            },
            editOk(value) {
                console.log('onOk: ', value);
            },
            // 日期
            dateOnChange(date, dateString) {
                this.form.attendTime = dateString
            },
            // 班次
            attendShiftChange(value) {
                this.form.attendShift = value
            },
            // 上班打卡时间
            startOnChange(time, timeString) {
                this.form.clockInTime = timeString
            },
            // 上班打卡结果
            clockInStatusChange(value) {
                this.form.clockInStatus = value
            },
            // 下班打卡时间
            endOnChange(time, timeString) {
                this.form.clockOutTime = timeString
            },
            // 下班打卡结果
            clockOutStatusChange(value) {
                this.form.clockOutStatus = value
            },
            // 批量删除
            batchDelete() {
                this.batchDeleteVisible = true
                this.ids = this.selectedRowKeys.join(',')
            },
            batchDeleteHandleOk(e) {
                this.batchDeleteConfirmLoading = true;
                let params = {
                    ids: this.ids,
                }
                deleteCheck(params).then((res)=>{
                    if(res.success){
                        this.batchDeleteVisible = false;
                        this.batchDeleteConfirmLoading = false;
                        this.selectNumber = 0
                        this.selectedRowKeys = []
                        this.deletdBtnShow = false
                        this.getCheckList()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            batchDeleteHandleCancel(e) {
                this.batchDeleteVisible = false;
            },
            // 导入
            doImport() {
                this.importVisible = true
                this.importForm.region = ''
                this.importForm.city = ''
                this.importForm.name = ''
                this.importForm.regionId = ''
                this.importForm.cityId = ''
                this.importForm.organizeId = ''
                this.disabled = false
                this.uploadDisabled = true

                this.getHeadquartersList()
            },
            importHandleOk(e) {
                this.importConfirmLoading = true;
                setTimeout(() => {
                    this.importVisible = false;
                    this.importConfirmLoading = false;
                }, 1000);
            },
            importHandleCancel(e) {
                this.importVisible = false;
            },
            // 导出
            doExport() {
                this.exportVisible = true
                this.ids = this.selectedRowKeys.join(',')
            },
            exportHandleOk(e) {
                this.exportConfirmLoading = true;
                
                let params = {
                    ids: this.ids,
                    regionId: this.regionId,
                    cityId: this.cityId,
                    organizeId: this.organizeId,
                    department: this.department,
                    position: this.position,
                    userName: this.userName,
                    userNo: this.userNo,
                    createBy: this.createBy,
                    updateBy: this.updateBy,
                    createTime_begin: this.createTime_begin,
                    createTime_end: this.createTime_end,
                    updateTime_begin: this.updateTime_begin,
                    updateTime_end: this.updateTime_end,
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                    delFlag: 0,
                }
                exportCheck(params).then((data)=>{
                    this.exportConfirmLoading = false;
                    if (!data) {
                        this.$message.warning("文件下载失败")
                        return
                    }
                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), '考勤'+'.xls')
                    }else{
                        let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', '考勤'+'.xls')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link); //下载完成移除元素
                        window.URL.revokeObjectURL(url); //释放掉blob对象
                        this.selectNumber = 0
                        this.selectedRowKeys = []
                        this.deletdBtnShow = false
                        this.exportVisible = false;
                        this.exportConfirmLoading = false;
                    }
                })
                
            },
            exportHandleCancel(e) {
                this.exportVisible = false;
            },
            // 导入表单
            importSubmit() {
                this.$refs.importRuleForm.validate(valid => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        return false;
                    }
                });
                },
            importCancel() {
                this.importVisible = false;
            },

            // 表单选择大区、城市、仓库
            // 获取总部
            getHeadquartersList(){
                let params = {}
                getHeadquarters(params).then((res)=>{
                    if(res.success){
                        this.headquartersId = res.result.organizeOrgList[0].id
                        this.getRegionList()
                    }
                })
            },
            // 获取大区
            getRegionList(){
                let params = {id: this.headquartersId}
                getRegion(params).then((res)=>{
                    if(res.success){
                        this.regionList = res.result.organizeOrgList
                        if(this.regionList.length == 1){
                            this.form.regionId = res.result.organizeOrgList[0].id
                            this.form.region = res.result.organizeOrgList[0].name
                            this.importForm.regionId = res.result.organizeOrgList[0].id
                            this.importForm.region = res.result.organizeOrgList[0].name
                            this.getCityList()
                        }
                    }
                })
            },
            // 选择大区
            regionChange(value){
                this.form.regionId = value
                this.importForm.regionId = value
                this.getCityList()
                for (var item of this.regionList) {
                    if(item.id === this.form.regionId){
                        this.form.region = item.name
                        this.importForm.region = item.name
                    }
                }
                this.form.cityId = ''
                this.form.city = ''
                this.form.organizeId = ''
                this.form.name = ''
                this.importForm.cityId = ''
                this.importForm.city = ''
                this.importForm.organizeId = ''
                this.importForm.name = ''
                this.uploadDisabled = true
            },
            // 获取城市
            getCityList(){
                let params = {
                    areaIds: this.form.regionId
                }
                getCity(params).then((res)=>{
                    if(res.success){
                        this.cityList = res.result.organizeOrgList
                        if(this.cityList.length == 1){
                            this.form.cityId = res.result.organizeOrgList[0].id
                            this.form.city = res.result.organizeOrgList[0].name
                            this.importForm.cityId = res.result.organizeOrgList[0].id
                            this.importForm.city = res.result.organizeOrgList[0].name
                            this.getWarehouseList()
                        }
                    }
                })
            },
            // 选择城市
            cityChange(value){
                this.form.cityId = value
                this.importForm.cityId = value
                this.getWarehouseList()
                for (var item of this.cityList) {
                    if(item.id === this.form.cityId){
                        this.form.city = item.name
                        this.importForm.city = item.name
                    }
                }
                this.form.organizeId = ''
                this.form.name = ''
                this.importForm.organizeId = ''
                this.importForm.name = ''
                this.uploadDisabled = true
            },
            // 获取仓库
            getWarehouseList(){
                let params = {
                    cityIds: this.form.cityId
                }
                getWarehouse(params).then((res)=>{
                    if(res.success){
                        this.warehouseList = res.result.organizeOrgList
                        if(this.warehouseList.length == 1){
                            this.form.organizeId = res.result.organizeOrgList[0].id
                            this.form.name = res.result.organizeOrgList[0].name
                            this.importForm.organizeId = res.result.organizeOrgList[0].id
                            this.importForm.name = res.result.organizeOrgList[0].name

                            if(this.importForm.regionId && this.importForm.cityId && this.importForm.organizeId){
                                this.uploadDisabled = false
                                this.uploadData = {
                                    region: this.importForm.region,
                                    city: this.importForm.city,
                                    name: this.importForm.name,
                                    regionId: this.importForm.regionId,
                                    cityId: this.importForm.cityId,
                                    organizeId: this.importForm.organizeId,
                                }
                            }
                        }
                    }
                })
            },
            // 选择仓库
            warehouseChange(value){
                this.form.organizeId = value
                this.importForm.organizeId = value
                for (var item of this.warehouseList) {
                    if(item.id === this.form.organizeId){
                        this.form.name = item.name
                        this.importForm.name = item.name
                    }
                }

                if(this.importForm.regionId && this.importForm.cityId && this.importForm.organizeId){
                    this.uploadDisabled = false
                    this.uploadData = {
                        region: this.importForm.region,
                        city: this.importForm.city,
                        name: this.importForm.name,
                        regionId: this.importForm.regionId,
                        cityId: this.importForm.cityId,
                        organizeId: this.importForm.organizeId,
                    }
                }
            },
            // 导入
            uploadChange(info) {
                if (info.file.status !== 'uploading') {
                    console.log(info.file);
                }
                if (info.file.status === 'done') {
                    if (info.file.response.success) {
                        this.$message.success(`${info.file.name}文件上传成功！`);
                        this.importVisible = false
                    }else{
                        this.$message.error(`${info.file.name}文件上传失败，${info.file.response.message}！`, 6);
                    }
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name}文件上传失败！`, 6);
                }
            },
        },
        
    }
</script>

<style lang="less" scoped>
    .checkWork{
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
                margin-top: 10px;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .add_btn{
            margin-bottom: 10px;
        }
        .data_source_list{
            h3{
                font-weight: bold;
            }
            .data_pagination{
                width: 100%;
                height: 32px;
                margin: 20px 0 10px 0;
            }
        }
    }
</style>